<template>
  <div class="bread-crumb">
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
          <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.title }}</span>
          <a v-else @click.prevent="routerLink(item)" style="color: #333">{{ item.title }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>

    <el-breadcrumb class="app-breadcrumb" separator=">" style="margin-left: 10px;">
      <el-breadcrumb-item v-for="(item,index) in categoryList" :key="index">
        <span>{{item}}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { findParent } from '@ruifox-cms/utils'
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()

const categoryList = computed(() => store.state.content.categoryCrumb)
const levelList = computed(() => {
  return findParent(store.getters.menus, router.currentRoute.value.meta.id)
})
const pathCompile = item => {
  if (item.children && item.children.length > 0 && item.type === 1) {
    return pathCompile(item.children[0])
  } else {
    return item.path
  }
}
const routerLink = item => {
  const { redirect } = item
  if (redirect) {
    router.push(redirect)
    return
  }
  let _path = pathCompile(item)
  router.push(_path)
}
</script>

<style lang="scss" scoped>
.bread-crumb {
  padding-left: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  ::v-deep(.el-breadcrumb__item) {
    font-size: 12px;
    .el-breadcrumb__inner a {
      font-weight: normal;
      color: $black_tips;
      &:hover {
        color: $black;
      }
    }
    .el-breadcrumb__separator {
      font-weight: normal;
      color: $black_tips;
      margin: 0 5px;
    }
  }
  ::v-deep(.el-breadcrumb__item):last-child .el-breadcrumb__inner {
    color: $black_tips;
    font-weight: normal;
  }
  .breadcrumb-move, /* 对移动中的元素应用的过渡 */
      .breadcrumb-enter-active,
      .breadcrumb-leave-active {
    transition: all 0.5s ease;
  }

  .breadcrumb-enter-from,
  .breadcrumb-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
  /* 确保将离开的元素从布局流中删除
        以便能够正确地计算移动的动画。 */
  .breadcrumb-leave-active {
    display: none;
  }
}
</style>
